import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import RefreshListView, { RefreshState } from 'react-native-refresh-list-view'
import LinearGradient from 'react-native-linear-gradient'
import * as api from '../../../../api'
import screen from '../../../../common/screen'
import color from '../../../../widget/color'
import RecommendMoreItem from './RecommendMoreItem'
type props = {
    navigation: any,
}

type state = {
    pageNum: Object,//当前页数
    moreList: Array<Object>,//更多的数据
    refreshState: number,//刷新的状态
}

const pageSize = 10

class RecommendMore extends PureComponent<props, state>{

    static navigationOptions = ({ navigation }: any) => ({
        header: null,//不使用导航栏
    })


    constructor(props: props) {
        super(props)
        this.state = {
            pageNum: 1,
            moreList: [],
            refreshState: RefreshState.Idle,
        }
    }

    componentDidMount() {
        this.requestFirstPage()
    }
    //下拉刷新请求
    requestFirstPage = async () => {
        try {
            this.setState({ refreshState: RefreshState.HeaderRefreshing })
            let params = {
                'type': this.props.navigation.state.params.type,
                'pageNum': this.state.pageNum,
                'pageSize': pageSize,
            }
            let json = await api.doPost('/goods/getAllRecommendProductList', params)
            let dataList = json.data.map((info) => {
                return {
                    'imageUrl': info.list_image,
                    'title': info.full_name,
                    'buyNum': info.sales_volume,
                    'earn': info.profit,
                    'price': info.member_price,
                    'id': info.id,
                    //'description':info.detail_name,
                }
            })

            this.setState({
                moreList: dataList,
                refreshState: RefreshState.Idle,
            })
        } catch (error) {
            this.setState({
                refreshState: RefreshState.Failure,
            })
        }
    }

    requestNextPage = async () => {
        try {
            let pageNum = this.state.pageNum + 1
            this.setState({
                pageNum: pageNum,
                refreshState: RefreshState.FooterRefreshing
            })
            let params = {
                'type': this.props.navigation.state.params.type,
                'pageNum': this.state.pageNum,
                'pageSize': pageSize,
            }
            let json = await api.doPost('/goods/getAllRecommendProductList', params)
            let dataList = json.data.map((info) => {
                return {
                    'imageUrl': info.list_image,
                    'title': info.full_name,
                    'buyNum': info.sales_volume,
                    'earn': info.profit,
                    'price': info.member_price,
                    'id': info.id,
                    //'description':info.detail_name,
                }
            })
            //alert(dataList.length)
            this.setState({
                moreList: [...this.state.moreList, ...dataList],
                refreshState: dataList.length > 0 ? RefreshState.Idle : RefreshState.NoMoreData,
            })
        } catch (error) {
            this.setState({
                refreshState: RefreshState.Failure,
            })
        }
    }
    //item
    renderCell = (rowData: any) => {
        return (
            <RecommendMoreItem
                key={0}
                info={rowData.item}
                onPress={(id: string) => {
                    alert(id)
                }}
            />
        )
    }
    //返回上一级页面
    goback = () => {
        this.props.navigation.pop()
    }

    keyExtractor = (item: Object, index: number) => {
        return index.toString()
    }

    render() {
        //生成头部标题
        let title;
        let type = this.props.navigation.state.params.type
        if ('1' == type) {
            title = "新品推荐"
        } else if ('2' == type) {
            title = "新人推荐"
        } else if ('3' == type) {
            title = '热销爆款'
        }
        // alert(title);


        return (
            <View style={styles.container}>
                {/*头部标题*/}
                <LinearGradient colors={['#FACF5B', '#FAC858', '#FBBC53', '#FBB558', '#FAAD6B', '#F9A87A', '#F9A387']}
                    start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
                    <View style={styles.headerTitle}>
                        {/*返回按钮*/}
                        <TouchableOpacity onPress={() => this.goback()} style={styles.goback}>
                            <Image source={require('../../../../img/home/back.png')} style={styles.back} />
                        </TouchableOpacity>
                        {/*本页标题*/}
                        <Text style={styles.title}>{title}</Text>
                    </View>
                </LinearGradient>
                {/*搜索框*/}

                <TouchableOpacity style={styles.searchBar}>
                    <Text style={{ marginLeft: 12, fontSize:13, color:'#999999'}}>请输入关键字</Text>
                    <View flex={1} />
                    <Image source={require('../../../../img/home/search_icon.png')} style={styles.seacrchIcon} />
                </TouchableOpacity>

                {/*推荐的内容*/}
                <RefreshListView
                    data={this.state.moreList}
                    renderItem={this.renderCell}
                    keyExtractor={this.keyExtractor}
                    refreshState={this.state.refreshState}
                    onHeaderRefresh={this.requestFirstPage}
                    onFooterRefresh={this.requestNextPage}
                />


            </View>
        );
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: color.paper,
    },
    headerTitle: {
        //backgroundColor: color.white,
        width: screen.width,//设置标题栏的宽度
        height: screen.width * 0.152,//设置标题栏的高度
        justifyContent: 'flex-start',//横轴对齐方式
        alignItems: "flex-end",//纵轴对齐方式
        flexDirection: 'row',
        //    marginTop: screen.statusBarHeight,
        //    marginTop: 15,
    },
    back: {
        marginLeft: screen.width * 0.053,
        height: 14,
        width: 14,
        marginBottom: 8,
        resizeMode: 'contain',
    },
    title: {
        marginLeft: screen.width * 0.314,
        fontSize: 20,
        color: '#FFFFFF',
    },
    search: {
        width: screen.width,
        height: 30,
        backgroundColor: 'white',
    },
    searchBar: {
        // flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        width: screen.width * 0.911,
        height: screen.width * 0.069,
        // height: 25,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 6,
        marginBottom: 4,
        borderRadius: 25,
        backgroundColor: '#FFFFFF',
        // elevation: 1,
    },
    seacrchIcon: {
        height: 12,
        width: 12,
        resizeMode: 'contain',
        margin: 7,
    }
})



export default RecommendMore